package com.cc.openeye.testState

import androidx.compose.runtime.Composable
import androidx.compose.runtime.SideEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import com.cc.openeye.Button
import com.cc.openeye.backgroundColor
import com.cc.openeye.base.BasePager
import com.cc.openeye.height
import com.cc.openeye.padding
import com.tencent.kuikly.compose.foundation.clickable
import com.tencent.kuikly.compose.foundation.layout.Column
import com.tencent.kuikly.compose.foundation.layout.fillMaxWidth
import com.tencent.kuikly.compose.material3.Text
import com.tencent.kuikly.compose.setContent
import com.tencent.kuikly.compose.ui.Modifier
import com.tencent.kuikly.compose.ui.graphics.Color
import com.tencent.kuikly.compose.ui.unit.sp
import com.tencent.kuikly.core.annotations.Page
import com.tencent.kuikly.core.nvi.serialization.json.JSONObject

@Page("TestStatePage", supportInLocal = true)
class TestStatePage : BasePager() {

    override fun onCreatePager(pagerId: String, pageData: JSONObject) {
        super.onCreatePager(pagerId, pageData)
        println("====>pagerId:${pagerId}")
    }


    override fun willInit() {
        super.willInit()
        setContent {
            testContent()
        }
    }


    @Composable
    fun testContent() {

        var testStat by remember {
            mutableStateOf(0)
        }

        Column(modifier = Modifier.padding(top = pageData.statusBarHeight)) {
            Button(
                modifier = Modifier.fillMaxWidth().height(45f).backgroundColor(Color.Blue),
                onClick = {
                    testStat++
                }) {
                Text("test")
            }


            testRemember(testStat)
        }
    }

    @Composable
    fun testRemember(testStat: Int) {

        println("====>1")

        var testRemember by remember {
            println("====>5")
            mutableStateOf(0)
        }

        // remember内部的逻辑只会在组合的时候执行一次，重组不会执行，但是remember只会记住状态变量
        // 目前看来，每次重组后testRemember1的值会变成0
        var testRemember1 = remember {
            println("====>6")
            0
        }

        // 状态变量就算没有在UI中被直接使用，只要在组合函数中打印，就算是被组件使用了
        // 每次状态变量的值发生改变后，testRemember组合函数都被重组
        // 但是如果下面的日志被注释，testRemember组合函数就不会在状态变量修改后重组了
        println("====>2:${testRemember}")
        println("====>21:${testRemember1}")

        SideEffect {
            println("====>SideEffect")

        }

        Text(
            testStat.toString(), modifier = Modifier.clickable {
                testRemember++
                testRemember1++
                println("====>3:${testRemember}")
                println("====>4:${testRemember1}")
            }.padding(top = 20f), fontSize = 20.sp
        )

    }
}